<style lang="scss">
.page-scroll-base {
  .my-content {
    height: 300px;
    --scrollbar-width: 10px;
    --scrollbar-track-fill-color: rgba(0, 0, 0, 0.1);
    --scrollbar-track-fill-color-hover: rgba(0, 0, 0, 0.16);
    --scrollbar-track-border-radius: 15px;
    --scrollbar-thumb-fill-color: #3b97ff;
    --scrollbar-thumb-fill-color-hover: #0366d6;
    --scrollbar-thumb-fill-color-active: #000;
  }
}
</style>

<template>
  <div class="page-scroll-base">
    <h3>自定义滚动条滚动组件</h3>
    <z-space vertical>

      <scrollable-component class="my-content">
        <!-- Your content -->
        start
        <div style="height: 1000px">content</div>
        end
      </scrollable-component>

    </z-space>

    <RemoteFileViewer file="example/views/scroll/base.vue"></RemoteFileViewer>

    <h3>配置文档</h3>
    <RemoteFileViewer file="example/views/scroll/index.scss"></RemoteFileViewer>
  </div>
</template>

<script>

import RemoteFileViewer from "@example/plugins/example/components/RemoteFileViewer";
export default {
  components: {RemoteFileViewer},
}
</script>
